<template>
  <div style="width: 100%;">
    <div
        style="
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100px;
            background-color: #F7F8FA;
            border-radius: 6px;
            position: relative;
        "
        @click="openSign"
    >
        <img src="@/assets/qianming.png" style="height: 20.5px;width: 25px;" alt="">
        <span style="color:#69718C;font-size: 14px;margin-top: 10px;">点此签名</span>
        <img :src="signature" v-if="signature"
            style="
                width: 100%;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                background: #fff;
            "
        alt="">
    </div>
    <van-dialog
      v-model="dialogShow"
      show-cancel-button
      @cancel="dialogShow = false"
      :before-close="submit"
    >
        <div slot="title" style="padding: 0 20px">
            <span>签名</span>
            <i
                class="el-icon-refresh"
                style="float: right"
                @click="removeSign"
            ></i>
        </div>
        <autograph v-if="dialogShow" ref="autograph"> </autograph>
    </van-dialog>
    <jkcns 
        :formLabelAlign="Object.assign({subjectTittle},formLabelAlign)"
        :autographPath="autographPath"
        v-if="field_id=='jkcns'"
    ></jkcns>
    <xlcn 
        :formLabelAlign="formLabelAlign"
        :autographPath="autographPath"
        v-if="field_id=='xlcn'"
    ></xlcn>
    <zjbl 
        :formLabelAlign="formLabelAlign"
        :autographPath="autographPath"
        v-if="field_id=='zjbl'"
    ></zjbl>
    <fwxy
        :autographPath="autographPath"
        v-if="field_id=='fwxy'"
    ></fwxy>
  </div>
</template>

<script>
import autograph from "@/components/autograph";//签名组件
import jkcns from './dom/jkcns.vue';//健康承诺书
import fwxy from './dom/fwxy.vue';//服务协议
import xlcn from './dom/xlcn.vue';//学历承诺书
import zjbl from './dom/zjbl.vue';//证件办理费用协议
import {
  upFile,
  upFileqm,
} from "@/utils/upFiel.js";
export default {
    components: {
        autograph,
        jkcns,
        fwxy,
        xlcn,
        zjbl,
    },
    props:{
        field_id:{
            type:String,
            default:'',
        },
        field_type:{
            type:String,
            default:'',
        },
        value:{
            type:String,
            default:'',
        },
        formLabelAlign:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        subjectTittle:{
            type:String,
            default:'',
        }
    },
    model:{
        prop:'value',
        event:'change'
    },
    watch:{
        dialogShow(val){
            this.$emit('change',val?this.field_id:'')
        },
        value(val){
            this.dialogShow=(val==this.field_id)
        },
    },
    data () {
        return {
            dialogShow:this.value==this.field_id,
            canvasdata:null,
            autographPath:'',//base64
            signsrc:'',
            signature:'',
        }
    },
    methods:{
        submit(action, done){
            if (action === "confirm") {
                if (this.canvasdata === this.$refs.autograph.commit()) {
                    this.$toast.fail("请签名后提交");
                    done(false);
                }
                this.autographPath = this.$refs.autograph.commit();
                this.$nextTick(async ()=>{
                    await upFileqm(this.autographPath, this.formLabelAlign.nickname, {
                        field: "signature",
                    }).then((res) => {
                        if (res.code == 200) {
                            this.signature = res.data.url;
                            this.signsrc = res.data.url
                            if(this.field_type == "sign"){
                                this.$emit('update',{signsrc:this.signsrc,signature:this.signature})
                                done();
                            }
                        } else {
                            this.$toast.fail(res.msg || "签名储存失败，请联系管理员");
                        }
                    });
                    if (this.field_type != "sign") {
                        setTimeout(() => {
                            upFile(
                                this.field_id,
                                { field: this.field_id },
                                'DomImg'+this.field_id
                            )
                            .then((res) => {
                                if (res.code == 200) {
                                    this.$toast.success("提交签名成功");
                                    this.signsrc = res.data.url
                                    this.$emit('update',{signsrc:this.signsrc,signature:this.signature})
                                    done();
                                } else {
                                    this.$toast.fail(res.msg || "签名失败");
                                }
                            })
                            .catch((err) => {
                                this.$toast.fail("存储状态异常,请重试!");
                                console.log(err);
                                done();
                            });
                        }, 500);
                    }
                })
            } else {
                done();
            }
        },
        openSign(){
            console.log('aaa');
            this.$emit('openSign')
            // this.dialogShow=true
            // this.$nextTick(()=>{
            //     this.canvasdata = this.$refs.autograph.commit()
            // });
        },
        removeSign(){
            this.signsrc=''
            this.signature=''
            this.autographPath=''
            this.dialogShow=false
            this.$emit('update',{signsrc:this.signsrc,signature:this.signature})
        }
    },
    mounted(){
    }
}
</script>

<style>

</style>